<script setup lang="ts">

import type DialogProp from "./dialog-prop.ts";

const emit = defineEmits(["close", "confirm"])

const prop = withDefaults(defineProps<DialogProp>(), {
  width: "600px",
  height: "auto",
})
const width = prop.width

const close = () => {
  emit("close")
}

</script>

<template>
  <teleport to="body">
    <div v-if="visible" class="dialog-mask" @click.self="close">
      <transition name="modal-fade">
        <div class="dialog-container" :style="{ width, height }" role="dialog" aria-modal="true">
          <!-- 头部插槽 -->
          <header class="modal-header">
            <slot name="header">
              <h3>{{ title }}</h3>
              <button class="close-btn" @click="close">×</button>
            </slot>
          </header>

          <!-- 主体插槽 -->
          <section class="dialog-body">
            <slot>
              <!-- 默认内容 -->
            </slot>
          </section>

          <!-- 底部插槽 -->
          <footer class="dialog-footer">
            <slot name="footer">
              <t-btn type="primary" @click="$emit('confirm')">确定</t-btn>
              <t-btn ghost @click="close">取消</t-btn>
            </slot>
          </footer>
        </div>
      </transition>
    </div>
  </teleport>
</template>

<style scoped>
/*遮罩层，覆盖整个视口*/
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/*dialog框主体*/
.dialog-container {
  position: relative;
  top: 10%;
  margin: 0 auto;

  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.dialog-body {
  padding: 16px;
  overflow: auto;
  flex: 1;
}

.dialog-footer {
  padding: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 10px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

/* 简单的淡入淡出动画 */
.modal-fade-enter-active, .modal-fade-leave-active {
  transition: opacity .2s;
}

.modal-fade-enter-from, .modal-fade-leave-to {
  opacity: 0;
}
</style>